<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				
				padding: 0;
				margin: 0;
			}
			ul,li{
				list-style: none;
			}
			.banner{
				width: 10rem;
				height: 4.6rem;
				position: relative;
				overflow: hidden;
			}
			.img{
				width: 10000px;
				position: absolute;
				top: 0;
				left: 0;
			}
			.img li{
				width: 10rem;
			}
			.img li img{
				width: 10rem;
				height: 4.6rem;
			}
			.fl{
				float: left;
			}
			.num{
				position: absolute;
			    width: 100%;
			    bottom: 6px;
			    left: 0;
			    text-align: center;
			    font-size: 0px;
			}
			.banner .num li {
			    width: 10px;
			    height: 10px;
			    background: #E1E2E5;
			    border-radius: 50%;
			    display: inline-block;
			    margin: 0 3px;
			    cursor: pointer;
			}
			.banner .num li.on{
				background: #999;
			}
		</style>
		<script src="js/flexible.js" type="text/javascript"></script>
	</head>
	<body>
		<div id="bannerBox">
			<div class="banner">
				<ul class="img">
					<li class="fl"><img class="fl" src="images/1.jpg" alt="" /></li>
					<li class="fl"><img class="fl" src="images/2.jpg" alt="" /></li>
					<li class="fl"><img class="fl" src="images/3.jpg" alt="" /></li>
					<li class="fl"><img class="fl" src="images/4.jpg" alt="" /></li>
					<li class="fl"><img class="fl" src="images/5.jpg" alt="" /></li>
					<li class="fl"><img class="fl" src="images/6.jpg" alt="" /></li>
					<li class="fl"><img class="fl" src="images/7.jpg" alt="" /></li>
					<li class="fl"><img class="fl" src="images/8.jpg" alt="" /></li>
				</ul>
			</div>
		</div>
		<script src="js/jquery-2.1.3.min.js" type="text/javascript"></script>
		<script src="js/functions.js" type="text/javascript"></script>
		<script type="text/javascript">
			//imgscrool('#bannerBox');
			banner()
		</script>
	</body>
</html>
